// components/share-view/share-view.js
import resource from '../../libs/resource.js'
import lottie from 'lottie-miniprogram';

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    animationPlaying: true,
    imagePath: resource.common_share_image
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行

    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
    ready: function () {
      // console.log('ready');
      this.getLottieFile()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    getLottieFile() {
      wx.cloud.callFunction({
        name: 'video-json',
        data: {
          action: 'getLottieData',
          lottieName: resource.component_lottie_share_json
        }
      }).then(res => {
        this.queryNode(res.result)
        // console.log("getLottieFile", res)
      }).catch(err => {
        // console.error("getLottieFile", err)
      })
    },
    queryNode(lottieObj) {
      var _this = this
      const query = wx.createSelectorQuery().in(this)
      query.select("#share-canvas").node(res => {
        // console.log('createSelectorQuery', res)
        const canvas = res.node
        const context = canvas.getContext('2d')
        lottie.setup(canvas) //要执行动画，必须调用setup,传入canvas对象
        // console.log('createSelectorQuery', lottie)
        this.ani = lottie.loadAnimation({ //微信小程序给的 接口，调用就完事了，原理不太懂
          loop: false, //是否循环播放（选填）
          autoplay: true, //是否自动播放（选填）
          animationData: lottieObj, //lottie json包的网络链接，可以防止小程序的体积过大，要注意请求域名要添加到小程序的合法域名中
          rendererSettings: {
            context //es6语法：等同于context:context（必填）
          }
        })
      }).exec()
      setTimeout(function () {
        _this.setData({
          animationPlaying: false
        })
      }, 4000)
    },
    //分享点击监听
    onShareClick() {
      if (this.ani)
        this.ani.play()
    }
  }
})